<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>数据表格</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.7/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="layui-container">

        <!-- 数据表格需要占位符 -->
        <table class="movie" lay-filter="movie-table"></table>
        
    </div>

    <script src="../lib/layui-v2.5.7/layui/layui.all.js"></script>
    <script type="text/html" id="toolbar">
        <!-- lay-event 设定行工具事件 -->
        <button class="layui-btn layui-btn-sm" lay-event="info">详情</button>
        <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除 {{d.rating_average}}</button>
    </script>
    <script type="text/javascript">
        // 数据表格使用的能力是 table 模块提供的
        var table = layui.table;

        // 渲染数据表格
        var tableIns = table.render({
            elem: ".movie", // 选中页面占位符
            id: "movieTable", // 表格唯一id值，供其它方法选中
            // 静态数据
            // data: [
            //     { name: "李白", age: 26, sex: "男", tel: "13567678945" },
            //     { name: "张飞", age: 29, sex: "男", tel: "13567678945" },
            //     { name: "刘天王", age: 22, sex: "男", tel: "13567678945" },
            //     { name: "杜甫", age: 24, sex: "男", tel: "13567678945" },
            // ],
            // 获取动态数据
            url: "http://bufantec.com/api/douban/movie/in_theaters", // 请求地址
            // method: "GET", // 请求方式，默认GET
            request: {
                pageName: "start",  // 设定分页名，默认 page
                limitName: "limit"  // 设定每页数量名，默认 limit
            }, // 定义两个默认参数的key名
            parseData(res){
                // 用作对数据的过滤，此函数的返回值即为 cols遍历的列表数据
                console.log(res);  
                return {
                    code: 0,
                    msg: "",
                    count: res.data.totalRow,
                    data: res.data.list
                }
            },
            response: { // 定义layui-table接受数据的格式
                // statusName: "状态码的字段名，默认code", 
                // statusName: "codeName",
                // statusCode: "表示数据请求成功的状态码，默认0", 
                // statusCode: 200,
                // msgName: "表示请求信息的字段名，默认为空", 
                // countName: "表示数据总条数的字段名，默认为count", 
                // countName: "totalRow",
                // dataName: "数据列表的字段名，默认为data" 
                // dataName: "list"
            },
            cols: [[ // 二维数组，以对象的形式设置表头参数
                {
                    type: "checkbox"
                },
                {
                    title: "序号",
                    type: "numbers", // 列类型：numbers/checkbox
                },
                {
                    title: "名字", // 列表的标题
                    field: "title", // 字段名 -> 对象的key名
                    width: 150
                },
                {
                    title: "类型", // 列表的标题
                    field: "genres", // 字段名 -> 对象的key名
                    width: 100,
                    sort: true, // 允许排序
                },
                {
                    title: "时长", // 列表的标题
                    field: "longtime", // 字段名 -> 对象的key名
                },
                {
                    title: "导演", // 列表的标题
                    field: "director", // 字段名 -> 对象的key名
                },
                {
                    title: "操作",
                    // 1. 页面 script 模板
                    // templet: "#toolbar"
                    // 2. 直接拼接 html 文本，需要包裹标签 
                    // 1和2 形式都可以通过 {{d}} 获取到当前行数据对象
                   /*  templet: `<div>
                    <button class="layui-btn layui-btn-sm">详情</button>
                    <button class="layui-btn layui-btn-sm">修改 {{d.age}}</button>
                    <button class="layui-btn layui-btn-sm">删除</button>
                    </div>` */
                    // 3. 函数形式，将返回值作为页面内容
                    /* templet: function(row){
                        // console.log(row);
                        return `
                        <button class="layui-btn layui-btn-sm">详情 ${row.age}</button>
                        <button class="layui-btn layui-btn-sm">修改</button>
                        <button class="layui-btn layui-btn-sm">删除</button>`;
                    } */
                    // 工具栏  -> 使用 templet 前两种形式来写
                    toolbar: "#toolbar"
                }
            ]],
            page: {
                limit: 7,
                limits: [7, 14, 28]
            }, // 开启分页  true/false  object
        })

        // 获取表格选中行
        // var checkes = table.checkStatus("movieTable");

        // 监听选中行
        table.on("checkbox", function (data){
            console.log(data.checked); // 当前行选中状态
            console.log(data.tr); // 当前行元素
            console.log(data.data); // 当前行数据
            // data.del(); // 删除当前行
            // data.update({ // 更新当前行数据
            //     title: "自定义更新数据"
            // })
        })

        //监听行单击事件
        // table.on('row', function(obj){
        //     console.log(obj.tr) //得到当前行元素对象
        //     console.log(obj.data) //得到当前行数据
        //     //obj.del(); //删除当前行
        //     //obj.update(fields) //修改当前行数据
        // });

        //监听行双击事件
        // table.on('rowDouble', function(obj){
        //     //obj 同上
        //     console.log(obj);
        // });

        table.on("tool(movie-table)", function (obj){
            console.log(obj);
            if(obj.event == "info"){
                alert('详情');
            }else if(obj.event == "edit"){
                alert('修改');
            }else if(obj.event == "del"){
                alert("删除");
            }
        })


        // 表格重载 -> 更换表格一部分参数，而不更换全部参数时
        // 1. var 变量 = table.render()   变量.reload({配置})
        // setTimeout(function (){
        //     tableIns.reload({
        //         url: "http://bufantec.com/api/douban/movie/top250"
        //     })
        // }, 6000)
        // 2. table.reload("tableRenderId", {配置})
        setTimeout(function (){
            table.reload("movieTable", {
                url: "http://bufantec.com/api/douban/movie/coming_soon"
            })
        }, 6000)
    </script>
</body>
</html>